<template>
  <div class="w-100">
    <div class="mb-3" v-for="(item,index) in dataList" :key="index">
      <el-form label-width="80px">
        <el-row :gutter="20">
          <el-col class="" :span="2">
            <div class="titleClass">{{"颜色"+item.seq}}</div>
            <!--            <el-form-item class="flex-2" label="是否可变背景">-->
            <!--              <el-select v-model="item.canChange" class="w-100">-->
            <!--                <el-option label="是" value="Y"/>-->
            <!--                <el-option label="否" value="N"/>-->
            <!--              </el-select>-->
            <!--            </el-form-item>-->
          </el-col>
          <el-col :span="10">
            <el-form-item label="色号选择" v-if="item.canChange=='N'">
              <el-select v-model="item.colorCode" class="w-100">
                <el-option
                  v-for="itemY in colorDataList"
                  :key="itemY.colorCode"
                  :label="itemY.colorName"
                  :value="itemY.colorCode"
                >
                  <span :style="{'color': itemY.colorValue}">{{ itemY.colorName }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="d-flex flex-column align-items-end" v-if="item.canChange=='Y'">
          <el-button type="primary" size="mini" @click="openCheckDataDialog(index)">添加{{item.seq}}</el-button>
          <el-table
            :data="item.itemList"
            border
            style="width: 100%;"
            class="mt-2"
          >
            <el-table-column type="index" label="序号" width="50" align="center"/>
            <el-table-column prop="colorName" label="颜色名称" align="center">
            </el-table-column>
            <el-table-column prop="colorValue" label="颜色色号" align="center">
              <template slot-scope="scope">
                <div :style="'color:'+ scope.row.colorValue">{{ scope.row.colorValue }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="colorSpeak" label="颜色描述" show-overflow-tooltip align="center"/>
            <el-table-column prop="judgeString" label="颜色逻辑" show-overflow-tooltip align="center">
            </el-table-column>
            <el-table-column label="操作" align="center" width="120">
              <template #default="scope">
                <!--                <el-button type="warning" size="mini" @click="handlerEdit(scope.$index, scope.row, index)">编辑-->
                <!--                </el-button>-->
                <el-button type="danger" size="mini" @click="handlerDelete(scope.$index, scope.row, index)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
    </div>

    <!-- 选择数据 -->
    <yc-dialog
      ref="checkDataDialog"
      :dialogTitle="dialogTitle"
      :show-center="false"
      :modal="false"
      dialog-width="65%">
      <template #content>
        <div class="dialog-content">
          <div>
            <el-form
              ref="newAccountFormRef"
              :rules="newAccountModelRules"
              :model="newAccountModel"
              label-width="100px"
            >
              <el-form-item class="mt-4" label="颜色色号" prop="colorValue">
                <!--                <el-color-picker v-model="newAccountModel.colorValue"></el-color-picker>-->
                <el-select v-model="newAccountModel.colorValue" class="w-100">
                  <el-option
                    v-for="itemY in colorDataList"
                    :key="itemY.colorCode"
                    :label="itemY.colorName"
                    :value="itemY.colorCode+'&'+itemY.colorName+'&'+itemY.colorValue"
                  >
                    <span :style="{'color': itemY.colorValue}">{{ itemY.colorName }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="mt-4" label="颜色描述" prop="colorSpeak">
                <el-input v-model="newAccountModel.colorSpeak" type="textarea" :rows="2"/>
              </el-form-item>
            </el-form>
          </div>
          <div class="d-flex align-items-center flex-wrap px-3 mt-3">
            <div class="mr-3 font-weight-bold font-15">聚合规则逻辑</div>
            <el-tag type="info" effect="plain" closable class="mr-3 mb-2" :class="{active:index == num}"
                    @click="changes(index)" @close="delTag(index)"
                    v-for="(item, index) in tagList" :key="index">{{ item }}
            </el-tag>
          </div>
          <div class="d-flex p-3" style="height: 300px;">
            <div class="shadow rounded-lg mr-4 p-3" style="width: 150px;">
              <div class="d-flex justify-content-between py-2 pointer" v-for="(item, index) in tagSelectList"
                   :key="index" @click="tagSelectIndexChange(index)">
                <div :class="tagSelectIndex == index ? 'text-primary' : ''">{{ item }}</div>
                <i class="el-icon-arrow-right" :class="tagSelectIndex == index ? 'text-primary' : ''"></i>
              </div>
            </div>

            <div class="shadow rounded-lg col over-auto p-3">
              <div class=" over-auto" v-if="tagSelectIndex == 0">
                <el-button size="mini" @click="pushString('0', '数据元')"
                           class="ml-0 mr-3 mb-3 pl-3 pr-3">数据元
                </el-button>
              </div>
              <div class=" over-auto" v-if="tagSelectIndex == 1">
                <el-button size="mini" v-for="(item, index) in symbolList" :key="index"
                           @click="pushString('1', item)"
                           class="ml-0 mr-3 mb-3 pl-5 pr-5">{{ item }}
                </el-button>
              </div>
              <div class=" " v-if="tagSelectIndex == 2">
                <el-input size="mini" type="textarea" placeholder="请输入" v-model="tagInput"
                          @blur="pushString('2', tagInput)"></el-input>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" :loading="addOrUpdateLoading" @click="checkDataSave">确定</el-button>
        <el-button @click="$refs.checkDataDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>

    <!-- 选择数据 -->
    <yc-dialog ref="checkDataDialog2" :dialogTitle="dialogTitle2" :show-center="false" :modal="false"
               dialog-width="65%">
      <template #content>
        <instantiateTable :selectionOrRadio="2" ref="instantiateTable"></instantiateTable>
      </template>
      <template #footer>
        <el-button type="primary" :loading="addOrUpdateLoading2" @click="checkDataSave2">确定</el-button>
        <el-button @click="$refs.checkDataDialog2.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>
  </div>
</template>

<script>
  import ycDialog from "@/components/pageDialog"
  import instantiateTable from "@/views/dataManage/polymerizationData/instantiateTable.vue"
  import {
    queryBaseColorList
  } from "@/api/systemBuilding/layout"

  export default {
    components: { ycDialog, instantiateTable },
    props: {
      dataList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        dialogTitle: "",
        dialogTitle2: "",
        instantiationThreeIndex: "",
        addOrUpdateLoading: false,
        addOrUpdateLoading2: false,
        colorDataList: [],


        newAccountModel: {
          colorValue: "",
          colorSpeak: "",
          id: 0
        },
        newAccountModelRules: {
          colorValue: [{ required: true, message: "请选择颜色色号", trigger: "change" }]
        },
        tagSelectIndex: 0,
        tagList: [],
        num: null,
        tagSelectList: ["数据元", "运算符", "输入框"], //"布尔字典"
        symbolList: ["(", ")", "+", "-", "*", "/", ">", "<", "==", "&&", "||"],
        tagInput: "",
        pushStringType: "",

        mapString: []
      }
    },
    created() {
      this.queryBaseColorList()
    },
    methods: {
      queryBaseColorList() {
        queryBaseColorList().then(res => {
          this.colorDataList = res.object
        })
      },

      openCheckDataDialog(index) {
        this.dialogTitle = "数据元查询"

        this.instantiationThreeIndex = index ? index : 0

        this.tagList = []
        this.mapString = []
        this.tagInput = ""
        Object.keys(this.newAccountModel).forEach((item) => {
          this.newAccountModel[item] = ""
        })

        this.addOrUpdateLoading = false
        this.$refs.checkDataDialog.dialogVisible = true
      },

      pushString(type, val, code) {
        this.pushStringType = ""
        // num 有值的话为编辑否之为新增
        if (this.num != null) {
          this.tagList.splice(this.num, 1, val)
          this.mapString.splice(this.num, 1, {
            itemType: type,
            itemValue: code ? code : val,
            itemValueName: val
          })
          this.num = null
        } else {
          if (type == "0") {
            this.pushStringType = "0"
            this.$refs.checkDataDialog2.dialogVisible = true
          } else {
            this.tagList.push(val)
            this.mapString.push({
              itemType: type,
              itemValue: code ? code : val,
              itemValueName: val
            })
          }
        }
      },
      // 新增数据元保存
      checkDataSave2() {
        this.addOrUpdateLoading2 = true

        let row = this.$refs.instantiateTable.selectedRow
        let parameterName = ""
        if (row.dataType == "0") {
          parameterName = row.deviceName + "." + row.parameterName
        } else {
          parameterName = row.parameterName
        }

        this.tagList.push(parameterName)
        this.mapString.push({
          itemType: this.pushStringType,
          itemValue: row.messages,
          itemValueName: parameterName
        })

        this.addOrUpdateLoading2 = false
        this.$refs.checkDataDialog2.dialogVisible = false
      },

      delTag(index) {
        this.tagList.splice(index, 1)
        this.mapString.splice(index, 1)
      },
      changes(key) {
        this.num = key
      },
      tagSelectIndexChange(index) {
        this.tagInput = ""
        this.tagSelectIndex = index
      },


      checkDataSave() {
        this.$refs.newAccountFormRef.validate(async (v) => {
          if (v) {
            this.addOrUpdateLoading = true
            if (this.newAccountModel.id) {

            } else {
              const obj = {
                colorValue: "",
                colorName: "",
                colorCode: "",
                colorSpeak: "",
                judgeString: "",
                childList: []
              }
              let arrColor = this.newAccountModel.colorValue.split("&")
              obj.colorCode = arrColor[0]
              obj.colorName = arrColor[1]
              obj.colorValue = arrColor[2]
              obj.colorSpeak = this.newAccountModel.colorSpeak

              let tempArr = this.mapString.map(item => {
                return item.itemValueName
              })
              obj.judgeString = tempArr.join("")
              obj.childList =this.mapString

              this.dataList[this.instantiationThreeIndex].itemList.push(obj)
            }
            this.addOrUpdateLoading = false
            this.$refs.checkDataDialog.dialogVisible = false
          }
        })
      },

      handlerEdit(indexY, row, index) {
      },
      handlerDelete(indexY, row, index) {
        this.dataList[index].itemList.splice(indexY, 1)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .titleClass {
    width: 45px;
    font-size: 16px;
    /*font-weight: 500;*/
    color: #000000;
    line-height: 37px;
  }

  .el-form-item {
    margin-bottom: 0 !important;
  }

  .active {
    background-color: #00557F;
    color: #fff;
  }
</style>
